<template>
	<view class="app-community">
		<u-navbar :is-back="false" :background="background" title-color="#ffffff"  :immersive="true"   titleWidth="350">
			<view class="menu">
				<!-- <i class="icon iconfont icon-caidanzhankai" @tap.stop="shownavs"></i> -->
				<image src="/static/index/menu.png" mode="widthFix" lazy-load @tap.stop="shownavs"></image>
			</view>
			<view class="menu-right" slot="right">
				{{address_l || '-'}}
			</view>
		</u-navbar>
		<u-popup v-model="showNav" mode="left"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
			<view class="nav-conte">
				<view class="nav-log">
					<image src="/static/menu/logo.png" mode="widthFix" lazy-load></image>
				</view>
				
				<view class="nav-address">
					{{address_l || '-'}}
				</view>
				<!-- <view class="nav-item">MOBI</view> -->
				<view class="nav-item active" hover-class="hover-transform1" @tap.stop="clickBullentin">
					<view class="nav-item-l ">
						<image src="../../static/menu/ce-0-1.png" mode="widthFix"></image>首页
					</view>
					<i class="icon iconfont icon-xiayibu"></i>
					</view>
				
				<!-- <view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(0)">
				<view class="nav-item-l">	
					<image src="../../static/menu/ce-1.png" mode="widthFix"></image>抢单</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(5)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-2.png" mode="widthFix"></image>质押</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
					
					<!-- <view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(6)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-3.png" mode="widthFix"></image>兑换</view>
						<i class="icon iconfont icon-xiayibu"></i></view> -->
						
						
						<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(4)">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-4.png" mode="widthFix"></image>团队</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
						
						
					
			<!-- 	<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(2)"><view class="nav-item-l"><image src="../../static/yuqishouyi.png" mode="widthFix"></image>CFD收益</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
				
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(1)"><view class="nav-item-l"><image src="../../static/menu/ce-5.png" mode="widthFix"></image>我的</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(89)"><view class="nav-item-l"><image src="../../static/menu/ce-6.png" mode="widthFix"></image>公告</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
			</view>
		</u-popup>
		<!--  -->
		<!-- <view class="pagetitle">市场</view> -->
		<view class="community-content">
			<view class="tabs">
				<view class="tab" @tap="clickTip(0)"><text :class="{active: currentTab}">{{i18n.Community_dynamics}}</text></view>
				<view class="tab" @tap="clickTip(1)"><text :class="{active: !currentTab}">{{i18n.news_flash}}</text></view>
			</view>
			<view class="list">
				<view class="li" v-for="(item,index) in list" :key="index" 
				v-if="item.time && item.title && item.content && list.length > 0" 
				@tap.stop="clickBullentin(item)">
					<view class="time"><view>{{item.time}}</view></view>
					<view class="name">{{item.title}}</view>
					<view class="content" v-html="item.content"></view>
					<view class="btns" v-if="item.labels && item.labels.length > 0" @tap.stop="clickBullentin(item)">
						<view class="btn" v-for="(label, idx) in item.labels" :key="idx">
							{{label.name}}
							<text class="iconfont" :class="label.num > 0 ? 'red icon-top-arrow' : 'green icon-down-arrow'"></text>
							<text :class="label.num > 0 ? 'red' : 'green'">{{label.num}} </text>
						</view>
					</view>
					<image src="/static/imgs/community-dot.png"></image>
					<view class="line"></view>
				</view>
				<view class="nodata" v-if="list.length == 0">
					<image src="../../static/imgs/nodata.png" mode="widthFix" lazy-load></image>
				</view>
			</view>
		</view>
		<load v-if="isLoading"></load>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from "vuex";
	import {pageto, showToast, fetch, diff_txt} from '@/common/js/util.js';
	import Load from '@/components/common/load.vue';
	export default {
		data() {
			return {
				background:'#1a2134',
				// true的时候是节点, false的时候是官方新闻
				currentTab: true,
				list: [],
				isLoading:false
			}
		},
		computed: {
			i18n () {
				return this.$t('message')
			},
			...mapGetters([
				'getLangType',
				'getRequestUrl',
				'getLoginInfo',
				'getLang',
				'getTextArr'
			])
		},
		onShow() {
			this.currentTab = true;
			this._get_news()
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getQz(index){
				this.showNav=false
				if(index==1){
					clearInterval(this.timer)
					this.timer=null;
					this.timer=''
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					return
				}else if(index==2){
					uni.reLaunch({
						url:'/pages/income/income'
					})
					return
				}else if(index==5){
					uni.reLaunch({
						url:'/pages/wealth-treasure/wealth-treasure'
					})
					return
				}else if(index==3){
					
					if(this.isBind)return
					this.showPopuleAver =true;
					return
				}else if(index==4){
					uni.reLaunch({
						url:'/pages/team/team'
					})
					return
				}else if(index==89){
					uni.reLaunch({
						url:"/pages/new/notice"
					})
					return
				}
				uni.reLaunch({
					url:'/pages/Polymeric/index'
				})
			},
			clickBullentin(e) {
				this.setBulletin('')
				// // console.log(e) 没有title content time 是不会显示出来的
				this.setBulletin(e);
				uni.navigateTo({
					url:'/pages/new/detail'
				})
				},
			clickTip(e) {
				this.list = []
				if (e) {
					this.currentTab = false;
					this._render_news();
					return;
				}
				this.currentTab = true;
				this._render_news();
			},
			_get_news() {
				// uni.showLoading();
				this.isLoading = true;
				let _data = {
					type: this.getLang
				}
				fetch('/api/index/news', _data, "post")
					.then(res => {
						// uni.hideLoading()
						this.isLoading = false;
						if (this.currentTab) {
							if (res.data.code==1) {
								if (res.data.data.length > 0) {
										res.data.data.forEach(item => {
											if (!item) return {};
											item.time = diff_txt(item.time, this.i18n.today, this.i18n.yesterday, this.i18n.b_yesterday);
											
										})
										this.list = res.data.data.filter(item => {
											if (!item) return false;
											return item.time && item.title && item.content
										});
										this.list.forEach(item=>{
											item.content = item.content
											  .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
											  .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
											  .replace(/<p>/ig, '<p class="p_class">')
											  .replace(/\<img/gi, '<img style="max-width:98%;height:auto" ')
											
										})
									
								} else {
									showToast(this.i18n.nodata);
								}
							} else {
								showToast(res.data.msg)
							}
						}
					})
					.catch(res => {
						uni.hideLoading()
						// console.log(res)
					})
			},
			_get_notice() {
				// uni.showLoading();
				this.isLoading = true;
				let _data = {
					type: this.getLang
				}
				fetch('/api/User/notice', _data, "post")
					.then(res => {
						// // console.log(res)
						// uni.hideLoading()
						this.isLoading = false;
						if (!this.currentTab) {
							if (res.data.code) {
								if (res.data.data.length > 0) {
										res.data.data.forEach(item => {
											item.time = diff_txt(item.time, this.i18n.today, this.i18n.yesterday, this.i18n.b_yesterday);
										})
										this.list = res.data.data;
										this.list.forEach(item=>{
											item.content = item.content
											  .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
											  .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
											  .replace(/<p>/ig, '<p class="p_class">')
											  .replace(/\<img/gi, '<img style="max-width:98%;height:auto" ')
											
										})
								} else {
									showToast(this.i18n.nodata);
								}
							} else {
								showToast(res.data.msg)
							}
						}
					})
					.catch(res => {
						uni.hideLoading()
						// console.log(res)
					})
			},
			_render_news() {
				if (this.currentTab) {
					this._get_news();
				} else {
					this._get_notice();
				}
			},
			...mapMutations([
				'setBulletin',
				'setLoginInfo'
			]),
		},
		components: {
			Load
		}
	}
</script>
<style>
	page{
		/* background: #ffffff !important; */
	}
</style>
<style lang="scss">
	@import '@/common/scss/variable.scss';
	@import '@/common/scss/global.scss';
	.nav-conte{
		width: 530rpx;
		padding: 150rpx 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background: #21242D;
		.nav-log{
			// border: 1rpx solid #fff;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			image{
				width: 105rpx;
				height: 104rpx;
				border-radius: 50rpx;
			}
		}
		.nav-address{
			font-size: 28rpx;
			color: #777D8A;
			margin-bottom: 82rpx;
		}
		.nav-item{
			&.active{
				color: #F5C249;
				i{
					color:#F5C249;
				}
			}
			// width: 400rpx;
			// padding: 0 30rpx;
			// border-bottom: 1rpx solid #e7eaf4;
			margin-bottom: 2rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 60rpx;
			margin-bottom: 48rpx;
			.nav-item-l{
				display: flex;
				align-items: center;
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight:100;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 22rpx;
				}
			}
			
		}
	}
	.menu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		image{
			width: 40rpx;
			height: 30rpx;
		}
	}
	.menu-right{
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #A7AEBE;
	}
	.index-top{
		font-size: 40rpx;
		font-weight: bold;
		color: $white;
		padding-left: 30rpx;
	}
	.tab-nav{
		display: flex;
		margin-left: 12%;
	}
	.nodata{
		width: 690rpx !important;
		height: auto !important;
		image{
			width: 620rpx;
			height: 620rpx;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			margin: 0 auto;

		}
	}
	rich-text {
	  width: 100%;
	  word-break: break-word;
	  .p_class {
		line-height: 46rpx;
		// text-indent: 60rpx;
		margin-bottom: 20rpx;
		// word-break: break-word;
		width: 100%;
		ord-break: break-all;
	  }

	  .pho {
		display: block;
		word-break: break-word;
		width: 100% !important;
		height: auto;
		border-radius: 20rpx;
	  }
	
	}
	.app-community {
		overflow: hidden;
		.community-content {
			padding-bottom: 50px;
			.tabs {
				display: flex;
				padding: 0 30upx;
				position: relative;
				padding-top: 22rpx;
				z-index: 2;
				.tab {
					color: $text-gray-color7;
					text-align: left;
					// margin-right: 60rpx;
					padding: 0upx 60rpx 10upx 0;
					&:first-of-type{
						border-right: 1rpx solid $white;
					}
					&:last-of-type{
						margin-left: 60rpx;
					}
					text {
						font-size: 32rpx;
						&.active {
							color: #1D7DFF;
							position: relative;
							font-weight: bold;
							&::after {
								position: absolute;
								left: 50%;
								top: 110%;
								transform: translateX(-50%);
								content: "";
								display: block;
								width: 70upx;
								height: 4upx;
								background-color: #1D7DFF;
								border-radius: 4upx;
							}
						}
					}
				}
			}
			.list {
				padding: 40rpx 24upx 0;
				.li {
					position: relative;
					display: flex;
					flex-direction: column;
					padding-left: 38upx;
					padding-top: 64upx;
					max-height: 470rpx;
					overflow: hidden;
					.time {
						position: relative;
						height: 50upx;
						view {
							position: absolute;
							background: linear-gradient(to right, #32B9FF, #1D7DFF);
							border-radius: 10upx;
							font-size: 12px;
							padding: 12upx 20upx 12upx;
							color: $white;
						}
					}
					.name {
						margin-top: 45rpx;
						font-size: 26rpx;
						color: $white;
						font-weight: bold;
					}
					.content {
						font-size: 11px;
						color: $text-gray-color1;
						margin-top: 20upx;
						line-height: 18px;
						letter-spacing: 1px;
						word-break:break-all;
						overflow: hidden;
						height: 54px;
					}
					.btns {
						display: flex;
						padding-top: 24upx;
						.btn {
							padding: 16upx 12upx;
							border-radius: 10upx;
							margin-right: 20upx;
							background-color: #262626;
							font-size: 10px;
							color: #A4A4A4;
							.red {
								color: #FF2828;
							}
							.green {
								color: #2DFF28;
								transform: rotateX(100deg);
							}
							.iconfont {
								font-size: 10px;
								margin-left: 10upx;
								margin-right: 6upx;
							}
						}
					}
					image {
						position: absolute;
						left: 9upx; 
						top: 82upx;
						width: 12upx;
						height: 12upx;
					}
					.line {
						position: absolute;
						width: 2upx;
						height: 100%;
						background-color: rgba(#2188FF, .2);
						left: 14upx;
						top: 0;
					}
					&:last-child {
						.line {
							height: calc(100% - 130upx);
						}
					}
					&:first-child {
						margin-top: -34upx;
					}
				}
			}
		}
		img {
			width: 100%;
		}
	}
</style>
	